<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Milano | Interactive Responsive HTML5 Template</title>
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Add your CSS files here -->
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/themes/green.css">

	<!-- Add your Fonts here -->
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

<a href="http://themeforest.net/item/milano-interactive-responsive-html5-template/5110008" title="Get this Theme" class="badge">Get this Theme</a>

<div class="settings">
	<a href="#" class="icon-cog"></a>
	<span class="themes">
		<a href="#" class="theme" data-color="red">Theme Red</a>
		<a href="#" class="theme" data-color="green">Theme Green</a>
		<a href="#" class="theme" data-color="blue">Theme Blue</a>
		<a href="#" class="theme" data-color="white">Theme White</a>
		<a href="#" class="theme" data-color="rose">Rose Color</a>
		<a href="#" class="theme" data-color="aqua">Aqua Color</a>
		<a href="#" class="theme" data-color="orange">Orange Color</a>
	</span>
</div>

<div class="container">

	<div class="logo"><img src="img/logo.svg" alt="Logo"></div>

	<div class="social">
		<a href="http://facebook.com/rocketthemes" class="icon-facebook" title="Facebook"></a>
		<a href="http://twitter.com/rocketthemes" class="icon-twitter" title="Twitter"></a>
		<a href="#" class="icon-googleplus" title="Googleplus"></a>
		<a href="#" class="icon-dribbble" title="Dribbble"></a>
		<a href="#" class="icon-behance" title="Behance"></a>
		<a href="#" class="icon-instagram" title="Instagram"></a>
		<a href="#" class="icon-flickr" title="Flickr"></a>
	</div>
	<!-- Social Icons End -->

	<header>
		<nav id="nav">
			<ul class="nav">
				<li><img src="img/logo.svg" alt="My Logo"></li>
				<li><a href="index.html" class="icon-user"><span>Profile</span></a></li>
				<li><a href="work.html" class="icon-briefcase"><span>Work</span></a></li>
				<li class="active"><a href="resume.html" class="icon-list"><span>Resume</span></a></li>
				<li><a href="contact.html" class="icon-mail"><span>Contact</span></a></li>
			</ul>
		</nav>
	</header>
	<!-- Header End -->

	<section class="content">
		<article class="career">
			<h2>My career</h2>
			<ul class="ro-timeline">
				<li>
					<div class="ro-time"><span>2012 - 2013</span></div>
					<div class="ro-icon icon-briefcase"></div>
					<div class="ro-label">
						<h3>Frontend Developer<span>Example Inc.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, maiores sint possimus distinctio tenetur in magni animi pariatur sed. Consequatur, earum, sunt a tenetur.</p>
					</div>
				</li>
				<li>
					<div class="ro-time"><span>2012</span></div>
					<div class="ro-icon icon-briefcase"></div>
					<div class="ro-label">
						<h3>Javascript Ninja<span>Google Inc.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, officia, recusandae quam laudantium eos et laboriosam aut vel ipsam commodi voluptatem sit repellendus blanditiis nobis eius!</p>
					</div>
				</li>
				<li>
					<div class="ro-time"><span>2010 - 2011</span></div>
					<div class="ro-icon icon-briefcase"></div>
					<div class="ro-label">
						<h3>Junior Frontend Developer<span>Facebook Inc.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, officia, recusandae quam laudantium eos et laboriosam aut vel ipsam commodi voluptatem sit repellendus blanditiis nobis eius!</p>
					</div>
				</li>
			</ul>

			<h2>My education</h2>
			<ul class="ro-timeline">
				<li>
					<div class="ro-time"><span>2009 - 2010</span></div>
					<div class="ro-icon icon-graduation"></div>
					<div class="ro-label">
						<h3>Computer Science Master<span>CalTech</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut obcaecati nemo id voluptates tempore facilis fuga deserunt eius voluptate possimus rerum accusantium alias autem.</p>
					</div>
				</li>
				<li>
					<div class="ro-time"><span>2005 - 2009</span></div>
					<div class="ro-icon icon-graduation"></div>
					<div class="ro-label">
						<h3>Computer Science B.Sc.<span>Harvard University</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, quod nam odio quasi cumque quis vel sunt dolore. Ea, iste, consectetur fugiat voluptatibus nulla voluptatem laborum reprehenderit sunt quia inventore sed illo ipsum quae architecto labore temporibus minus. Error, consequatur, dolorem?</p>
					</div>
				</li>
			</ul>

		</article>
		<!-- Timeline End -->

		<aside class="sidebar">
			<h2>My skills</h2>
			<h3 class="test"><span class="icon-text-2"></span>Programming</h3>
			<ul class="ratings">
				<li>
					<h5>HTML</h5>
					<div class="rating" data-rating="7">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
				<li>
					<h5>CSS</h5>
					<div class="rating" data-rating="8">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
				<li>
					<h5>JavaScript</h5>
					<div class="rating" data-rating="8">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
				<li>
					<h5>PHP</h5>
					<div class="rating" data-rating="6">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
				<li>
					<h5>iOS</h5>
					<div class="rating" data-rating="6">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
				<li>
					<h5>Ruby on Rails</h5>
					<div class="rating" data-rating="8">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</li>
			</ul>

			<h3 class="test"><span class="icon-brush"></span>Graphic Design</h3>
			<ul class="skills">
				<li><span data-skill="90">Photoshop</span></li>
				<li><span data-skill="80">Illustrator</span></li>
				<li><span data-skill="85">InDesign</span></li>
				<li><span data-skill="90">Firework</span></li>
				<li><span data-skill="85">After Effects</span></li>
				<li><span data-skill="100">Cinema 4D</span></li>
			</ul>

			<h3 class="test"><span class="icon-tools"></span>Other skills</h3>
			<ul class="skills">
				<li><span data-skill="92">Web Design</span></li>
				<li><span data-skill="96">Web Development</span></li>
				<li><span data-skill="84">Logo Branding</span></li>
				<li><span data-skill="85">WordPress</span></li>
				<li><span data-skill="81">Graphic Design</span></li>
			</ul>
		</aside>
		<!-- Sidebar End -->

	</section>
	<!-- Content End -->

</div>
<!-- Container End -->


<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>

<script>
      var navigation = responsiveNav("#nav", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 400,      // Integer: Speed of the transition, in milliseconds
        label: "",            // String: Label for the navigation toggle
        insert: "before",     // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
</script>

</body>
</html>